<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统 - 管理中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta ng-include="'head.html'"> -->
    <style type="text/css">
        .headTitle {font-size:20px; text-align:center; font-family:黑体; padding:3px 0px; border-bottom:1px dashed #ccc}
        .labelKey {margin:5px 5px; width:80px; color:#fff; height:22px; line-height:22px; text-align:center; font-family:arial; background-color:#404a59;}
        .labelOption{ font-family:宋体; font-size: 14px; margin-right: 10px; font-weight: 400;
            cursor: pointer; color:#337ab7;
        }
        .inputGroup{ position:absolute; left:150px;top:1px;width:144px; white-space:nowrap; overflow:hidden;padding: 2px 0px;  }
        .inputGroup:hover{border: 1px solid #ccc; padding: 2px 5px; width:205px ;}
        .inputGroup>.inputTxt{ height:20px; width: 65px; font-size: 12px}
        .btnOK{ height: 23px; padding: 0 10px; background: #f40; color: #fff; line-height: 23px; cursor: pointer; border: 0px; border-radius: 2px; background-clip: padding-box;
        }
        .sel{ background-color: #19B5FE; color:red; }
    </style>
    <script src="../lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/build.js" type="text/javascript"></script>
    <script src="../js/public.js" type="text/javascript"></script>
</head>
<body class="flat-blue">
<div class="app-container H100" ng-app="myApp" ng-controller="myCtrl">
<div class="row content-container H100">
<div ng-include="'menus.html'" onload="loadReady()"></div>
<div class="container-fluid H100 pb15">
<div class="side-body padding-top H100" id="main" style="padding-top:70px">
    <!------------------Main---------------->
    <div class="H100" style="width:99%; background-color:#fff; position:relative">
        <div class="headTitle">多维分析</div>
        <div style="height:100px; width:100%;float:left">
            <div class="col-md-6 H100" style="margin-top:5px">
                <div style="height:35px">
                    <label class="labelKey">装置类型</label>
                    <label class="labelOption" ng-class="options[opt]" ng-click="changeSel(0, opt)" ng-repeat="opt in optionType">{{opt}}</label>
                </div>
                <div>
                    <label class="labelKey">地区</label>
                    <select ng-model="selProvince" ng-class="options['region']"  style="width:80px;" ng-change="changeSel(1, 'region', selProvince);" ng-options="x for x in provinces"></select>
                </div>
            </div>
            <div class="col-md-6 H100" style="margin-top:5px">
                <div style="height:35px; ">
                    <label class="labelKey">装置等级</label>
                    <label class="labelOption" ng-click="changeSel(2, 'level0')" ng-class="options['level0']">不限</label>
                    <div class="inputGroup" ng-class="options['level1']">
                        <input class="inputTxt" type="text" ng-model="minL" placeholder="Nm³/h" title="最低"> - 
                        <input class="inputTxt" type="text" ng-model="maxL" placeholder="Nm³/h" title="最高"> 
                        <button type="button" class="btnOK" ng-click="changeSel(2, 'level1', minL, maxL)"  style="">确定</button>
                    </div>
                </div>
                <div>
                    <label class="labelKey">运营模式</label>
                    <label class="labelOption" ng-class="options[opt]" ng-click="changeSel(3, opt)" ng-repeat="opt in optionModel">{{opt}}</label>
                </div>
            </div>

        </div>
        <div style="position:absolute; width:100%; top:118px;bottom:10px;min-height:320px;">
            <div class="col-md-6" style="height:100%">
                <div id="view1" style="width:100%; height:50%"></div>
                <div id="view2" style="width:100%; height:50%"></div>  
            </div>
            <div class="col-md-6" style="height:100%">
                <div id="view3" style="width:100%; height:50%"></div>
                <div id="view4" style="width:100%; height:50%"></div> 
            </div>
        </div>        

    </div>
    <div style="height:500px;background-color:#fff; padding-top:40px; padding-bottom:50px ">
        <div class="col-md-12" style="height:100%">
            <div id="view5" style="width:100%; height:100%"></div>
        </div>
    </div>
    <!------------------End Main---------------------->
</div>  <!--End side-body-->
</div>  <!--End container-fluid-->
</div>  <!--End content-container-->
<div ng-include="'footer.html'"></div>
</div>  <!--End app-container-->

<script type="text/javascript" src="../lib/js/echarts.v3.min.js"></script>
<script type="text/javascript" src="../js/citys.js"></script>
<script type="text/javascript" src="../js/china.js"></script>
<script language="javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        loadCtlBase($scope);
        
        $scope.selProvince = "全国";
        $scope.provinces = ["全国", '河北省','山东省','河南省','山西省','陕西省','安徽省', '湖北省','湖南省','江西省','浙江省','江苏省','广东省','福建省','海南省','辽宁省','吉林省','黑龙江省','青海省','甘肃省','四川省','贵州省','云南省','西藏自治区','内蒙古自治区','宁夏回族自治区','新疆维吾尔自治区','广西壮族自治区','北京市','上海市','天津市','重庆市','香港','澳门','台湾'];
        $scope.optionType = ['常规装置', '高纯装置', '液体装置'];
        $scope.optionModel = ['自主运营', '气体投资'];
        $scope.options = {};
       
        $scope.selAll = true;
        $scope.keys = ['钢铁', '化工', '石油化工', '有色冶金', '气投', '其它'];
        $scope.param = {};
        $scope.param = {'category':'常规装置'};

        // 块序号， 
        $scope.changeSel = function(block, key, p1, p2){
            clearSel(block);
            $scope.options[key] = 'sel';
            if(block==0){
                $scope.param = {'category':key };
            }else if(block==1){
                $scope.param = (p1=="全国") ? {} : { 'province': p1 };
            }else if(block==2){
                $scope.param = key=="level0" ? {} : {'minO':p1, 'maxO':p2};
            }else if(block==3){
                $scope.param = {'modal':key};
            }

            cout($scope.param);
            loadViews();
        };


        //// 清除选择效果
        function clearSel(block){
            for(var opt in $scope.options) $scope.options[opt] = '';
            if(block!=1)$scope.selProvince = "全国";
            if(block!=2){
                $scope.minO = "";
                $scope.maxO = "";
            }
        }

        $scope.options['常规装置'] = 'sel'; 
        loadViews();
        

        function loadViews(){
            var param = $scope.param;

            //// 装置总量
            ajaxData('get_chart_O', param, function(rst){
                var data = rst.data;
                //cout(data);

                drawLine("view1", dictToList(data));
            });
            //// 装置总台数
            ajaxData('get_chart_V', param, function(rst){
                var data = rst.data;
                //cout(data);

                drawLine("view3", dictToList(data), "装机台总数");
            });
            //// 行业分布
            ajaxData('get_chart_industry', param, function(rst){
                var data = rst.data;
                //cout(data);

                drawPie("view2", dictToList(data));
            });
            //// 公司列表Top20
            ajaxData('get_chart_company', param, function(rst){
                var data = rst.data;
                //cout(data);

                drawBarEx("view5", dictToList(data));
            });
            
            //// 区域分布
            ajaxData('get_chart_region', param, function(rst){
                var data = rst.data;
                //cout(data);

                drawBar("view4", dictToList(data));
            });

            //drawBar("view4", data);
        } 
    });


    function drawBar(id, data){
        //data = data.sort(function(a, b){ return a.value - b.value; });
        var option = {
            tooltip : { trigger: 'item', formatter: "装置数量 {a} <br/>{b} : {c} ({d}%)" },
            xAxis: {
                type: 'category',
                "axisLabel": {
                    "interval": data.length>16 ? 1 : 0 , 
                    "rotate": -45, "show": true, 
                    "textStyle": { "fontSize": 10 }
                }, 
                data: data.map(function(d){ return d.name; })
            },
            grid:{ top:'3%', bottom:'35px' },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data.map(function(d){ return d.value; }),
                type: 'bar', itemStyle:{ normal:{ color:'#FA8072' }},
            }]
        };
        Init3(option, id);
    }

    function drawBarEx(id, data){ 
        var data1 = []; data2 = data.map(function(d){  data1.push(d.value.sumO); return d.value.count; });
        var option = {
            tooltip: { trigger: 'item', axisPointer: {type: 'cross'} },
            legend: { data:['制氧量', '设备套数']},
            grid:{ bottom:'70px', left:'70px', right:'70px', top:'15%' },
            xAxis: [{ type: 'category', data: data.map(function(d){ return d.name; }),
                axisLabel:{ rotate:-45, interval:0 }
             }],
            yAxis: [
                { type: 'value', name: '制氧量 Nm³/H', axisLabel: { formatter: '{value} ' }}, 
                { type: 'value', name: '套数', axisLabel: { formatter: '{value} ' }}
            ],
            series: [ {
                    name:'制氧量', type:'bar', data: data1
                },{
                    name:'设备套数', type:'line', yAxisIndex: 1, data: data2
                }
            ]
        };

        Init3(option, id);
    }
    function drawPie(id, data){
        var option = {
            color:['#FFDAB9', '#FFA07A', '#FF7F50', '#FF6347', '#CD5C5C', '#A52A2A'],
            title: {
                text: '行业分布', left: '1px', textStyle: { fontSize: 13 }
            },
            tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" },
            legend: { orient: 'vertical', x: 'left', top:'35px',
                data: data.map(function(d){ return d.name; })
            },
            series : [
                {
                    type:'pie', radius : '85%', center: ['50%', '50%'], //roseType: 'radius',
                    data:data.sort(function (a, b) { return a.value - b.value; }),
                    labelLine: {
                        normal: { smooth: 0.2, length: 10, length2: 20 }
                    },
                }
            ]
        };
        Init3(option, id);
    }

    function drawLine(id, data, title){
        var option = {
            title:{ text:title || "装机总量", top:-2, left:'center', textStyle:{ fontSize:13 }},
            xAxis: {
                type: 'category',
                data: data.map(function(d){ return d.name; })
            },
            grid:{ top:'10%', bottom:'40px' },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data.map(function(d){ return d.value; }),
                type: 'line',
                itemStyle:{ normal:{ color:'#569' }}
            }]
        };

        Init3(option, id);
    }

    //// 水平柱状图
    function drawBarH(id, data){
        data = data.sort(function(a, b){ return a.value - b.value; });
        var option = {
            title:{ text:'企业设备数量TOP10', left:'0px'},
            "grid": { "left": "10%", "top": "10%", "containLabel": true },
            "yAxis": [{
                "type": "category",
                "data": data.map(function(d){ return d.name; }),
                "axisLine": { "show": false },
                "axisTick": { "show": false, "alignWithLabel": true },
                "axisLabel": { "textStyle": { "color": "#ffb069" } }
            }],
            "xAxis": [{
                "type": "value",
                "axisLine": { "show": false },
                "axisTick": {  "show": false },
                "axisLabel": { "show": false },
                "splitLine": { "show": false }
            }],
            "series": [{
                "type": "bar", "data": data, //"barCategoryGap": "35%",
                "label": { "normal": { "show": true, "position": "right",
                        "textStyle": { "color": "#ff0000" }
                }},
                barMaxWidth: 20, "itemStyle": { "normal": { color: "#40E0D0" } }
            }]
        };
        Init3(option, id);
    }
    


    
    
    $(document).ready(function(){
        // $("#fullH").heiht();
        
        
        // loadViews("view1");
        /*
        $('.date').datetimepicker({
            format: 'yyyy-mm-dd', language:'zh-CN', autoclose:true, minView:"month"
        });
        */
    });


</script>

</body>
</html>
